<template>
  <a-card :bordered="false">
    <h3>社区数据概览</h3>
    <div class="data-block">
      <div class="title-wrapper">
        <div class="title">社区任务</div>
        <div class="desc">实时数据</div>
      </div>
      <a-row :gutter="16" style="margin-top: 20px;">
        <a-col :span="6">
          <a-card title="待审核内容">
            <a slot="extra" @click="contentList">去审核 &gt;</a>
            <p class="num">{{details.waitContent || 0}}</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="待审核评论">
            <a slot="extra" @click="commentList">去审核 &gt;</a>
            <p class="num">{{details.waitComment || 0}}</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="待处理举报">
            <a slot="extra" @click="reportList">去审核 &gt;</a>
            <p class="num">{{details.waitInform || 0}}</p>
          </a-card>
        </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <div class="data-block">
      <div class="title-wrapper">
        <div class="title">
          社区数据
          <a-popover>
            <template slot="content">
              <h4>数据定义：</h4>
              <p>
                累计用户数：截止昨日23:59进入社区的用户数<br />

                昨日新增用户数：昨日进入社区的新用户数<br />

                累计秀搭用户数：截止昨日23:59有过内容发布的用户数之和<br />

                昨日秀搭用户数：昨日有过内容发布的用户数<br />

                累计内容数：截止昨日23:59社区产生的内容数（含审核中、审核通过、审核不通过的内容）<br />

                昨日新增内容数：昨日社区产生的内容数（含审核中、审核通过、审核不通过的内容）<br />

                累计内容互动数：截止昨日23:59社区中内容互动数（评论、点赞、转发数之和）<br />

                昨日内容互动数：昨日社区中内容互动数（评论、点赞、转发数之和）
              </p>
            </template>
            <a-icon style="margin-left: 5px;" type="question-circle" theme="filled" />
          </a-popover>
        </div>
        <div class="desc">T-1数据</div>
      </div>
      <a-row :gutter="16" style="margin-top: 20px;">
        <a-col :span="6">
          <a-card title="累计用户数">
            <p class="num">{{details.totalUser || 0}}</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="昨日新增用户数">
            <p class="num">{{details.yesterdayUser || 0}}</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="累计秀搭用户数">
            <p class="num">{{details.totalPublishUser || 0}}</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="昨日秀搭用户数">
            <p class="num">{{details.yesterdayPublish || 0}}</p>
          </a-card>
        </a-col>
      </a-row>
      <a-row :gutter="16" style="margin-top: 20px;">
        <a-col :span="6">
          <a-card title="累计内容数">
            <p class="num">{{details.totalContent || 0}}</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="昨日新增内容数">
            <p class="num">{{details.yesterdayContent || 0}}</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="累计内容互动数">
            <p class="num">{{details.totalInteraction || 0}}</p>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="昨日内容互动数">
            <p class="num">{{details.yesterdayInteraction || 0}}</p>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>
<script>
import { communityStatistics } from '@/api/micromall/communityContent'

export default {
  components: {},
  data() {
    return {
      details: {}
    }
  },
  created() {
    this.getCommunityStatistics()
  },
  computed: {},
  mounted() {},
  watch: {},
  methods: {
    getCommunityStatistics() {
      communityStatistics({}).then(res => {
        if (res.code === 200) {
          this.details = res.data
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 内容列表
    contentList() {
      this.$router.push(`/micromall/community/contentManagement/contentList?status=2`)
    },

    // 评论管理
    commentList() {
      this.$router.push(`/micromall/community/contentManagement/commentList?status=2`)
    },

    // 举报管理
    reportList() {
      this.$router.push(`/micromall/community/contentManagement/reportList`)
    },
  }
}
</script>
<style lang="less" scoped>
.data-block {
  margin-top: 20px;
  .title-wrapper {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;
    .title {
      font-weight: bold;
    }
  }
  .num {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0;
  }
}
</style>
